<template>
  <div>
    <el-form
      :inline="true"
      size="mini"
      :model="formInline"
      label-position="right">
      <el-form-item label="项目名称">
        <el-input
          class=""
          placeholder="请输入"
          v-model="formInline.projectName"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目编号">
        <el-input
          class=""
          placeholder="请输入"
          v-model="formInline.code"
        ></el-input>
      </el-form-item>
      <el-form-item label="复盘时间">
        <el-date-picker
          v-model="times"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">搜索</el-button>
        <el-button type="warning " icon="el-icon-refresh-right" size="mini" @click="resetFromdata"></el-button>
        <!-- <el-button type="primary" sizi="mini">导出</el-button> -->

      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          size="mini"
          style="width: 100%"
          v-loading="isShowloading"
        >
          <el-table-column
            type="index"
            align="center"
            width="55"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="projectName"
            align="center"
            label="项目名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectCode"
            align="center"
            label="项目编号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="businessTypeName"
            align="center"
            label="项目类型"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="analysePeopleName"
            align="center"
            label="复盘参与人"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="analyseDate"
            align="center"
            label="复盘时间"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label=" 操作"
            align="center"
            >
            <!--  -->
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handclickProjectViewDetail(scope.row)"
            >
              查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="page_size"
            :page-sizes="[10, 20, 50, 100]"
          ></el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';

// import { ProjectViewDetail } from '@/api/projectAdministration.js';
export default {
  name: 'ProjectreView',
  data () {
    return {
      projectName: '',
      analysePeopleList: '',
      analyseDate: '',
      businessTypeName: '',
      projectCode: '',
      isShowloading: false,
      tableData: [],
      pageNo: 1,
      page_size: 10,
      formInline: {
        projectName: null,
        code: null
      },
      times: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '三天前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }, {
          text: '一月前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },
  activated () {
    this.loadAttendanceWidgetData();
  },
  mounted () {
    this.loadAttendanceWidgetData();
  },
  methods: {
    // 查看项目复盘详情
    handclickProjectViewDetail (row) {
      this.$router.push({
        name: 'ProjectViewDetail',
        params: {
          detail: row
          // projectName: row.projectName,
          // projectCode: row.projectCode,
          // businessTypeName: row.businessTypeName,
          // analysePeopleName: row.analysePeopleName,
          // analyseDate: row.analyseDate,
          // goalResult: row.goalResult,
          // analysisReason: row.analysisReason,
          // conclusionRegular: row.conclusionRegular,
          // projectId: row.projectId,
          // id: row.id
        }
      })
    },
    // 搜索
    onSubmit () {
      this.pageNo = 1;
      this.loadAttendanceWidgetData();
    },
    // 重置
    resetFromdata () {
      this.formInline = {
        projectName: null,
        code: null
      };
      this.times = '';
      this.pageNo = 1;
      this.page_size = 10;
      this.loadAttendanceWidgetData();
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val;
      this.loadAttendanceWidgetData();
    },
    handleSizeChange (val) {
      this.page_size = val;
      this.loadAttendanceWidgetData();
    },
    currentChange (val) {
      this.pageNo = val;
      this.loadAttendanceWidgetData();
    },
    // 获取项目复盘列表
    loadAttendanceWidgetData () {
      let params = {
        ...this.formInline,
        analyseDate1: this.times && this.times.length > 0 ? this.times[0] : '',
        analyseDate2: this.times && this.times.length > 1 ? this.times[1] : '',
        size: this.page_size,
        current: this.pageNo,
        isState: '1'
      }
      return new Promise((resolve, reject) => {
        Administration.analyselist(this, params)
          .then((res) => {
            this.tableData = res.data.records;
          })
          .catch((e) => {
            reject(e);
          })
      })
    }
  }
}
</script>
